<template>
	<view>
		<u-card :title="item.title" :border="false" :head-style="{fontWeight:700}" :head-border-bottom="false"
			:foot-border-top="false" :body-style="{padding:'0 30rpx'}" v-for="(item,index) in cardList" :key="index"
			@click="openSkip(item)">
			<view class="" slot="body">
				<view class="u-body-item u-flex u-col-between">
					<text class="u-body-item-title u-line-2" v-html="(item.content)"></text>
				</view>
			</view>
			<view class="" slot="foot">
				<view class="info">
					<view class="info-left">
						<u-icon name="clock" size="34" label-color="#999" :label="item.createTime"></u-icon>
					</view>
					<view class="info-right">
						<u-icon name="eye" size="30" label-color="#999" :label="item.readNum" class="mr-20" :margin-left="15" />
						<u-icon name="arrow-right" size="30" />
					</view>
				</view>
			</view>
		</u-card>
	</view>
</template>

<script>
	import {
		latestNewsPage
	} from '@/api/base/latestNewsApi.js'
	export default {
		data() {
			return {
				cardList: [],
				parameter:{
					current: 1,
					size: 10
				},
				allDataLoaded: false
			}
		},
		mounted() {
		    this.loadData()
		  },
		methods: {
			 async loadData() {
			      try {
					const parmas = {...this.parameter};
			        const response = await latestNewsPage(parmas)
			
			        if (response.records.length > 0) { // 如果有数据
			                  this.cardList = this.cardList.concat(response.records);
			                  this.parameter.current++
			                } else {
			                  this.allDataLoaded = true;  // 数据已经全部加载完
			             }
			      } catch (error) {
			        console.error('error', error)
			      }
				},
			openSkip(item) {
				this.$u.route('/subPack/noticeDetails', {
					title: item.title,
					id:item.id
				})
			},
			onReachBottom() {
				if (!this.allDataLoaded) {  // 如果数据还没有全部加载完才继续加载
				    this.loadData()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #999;

		/deep/.u-icon {
			vertical-align: middle;
		}
	}

	.u-card-wrap {
		background-color: $u-bg-color;
		padding: 1px;
	}

	.u-body-item {
		color: $-color-muted;
	}

	.u-body-item image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-left: 12rpx;
	}
</style>